<template>
	<view class="wrap">
		<view class="info">
			<view class="title">
				{{pageData.name}}
			</view>
			<view class="content">
				应付金额：<text>{{pageData.price}} ￥</text>
			</view>
		</view>
		<view class="card-wrap">
			<view class="list-wrap">
				<view class="content">
					收货人：{{pageData.receiver}}
				</view>
				
			</view>
			<view class="list-wrap">
				<view class="content">
					收货手机号：{{pageData.receiver_phone}}
				</view>
				
			</view>
			<view class="list-wrap">
				<view class="content">
					收货地址：{{pageData.receiver_address}}
				</view>
				
			</view>
		</view>
		<view class="card-wrap">
			<view class="bold-t">
				付款信息
			</view>
			<view class="list-wrap">
				<view class="content">
					银行卡号：{{pageData.bank_card}}
				</view>
				<view class="copy-btn" @click="copyData(pageData.bank_card)">
					复制
				</view>
			</view>
			<view class="list-wrap">
				<view class="content">
					开户行：{{pageData.bank_of_deposit}}
				</view>
				<view class="copy-btn" @click="copyData(pageData.bank_of_deposit)">
					复制
				</view>
			</view>
			<view class="list-wrap">
				<view class="content">
					开户姓名：{{pageData.bank_user}}
				</view>
				<view class="copy-btn" @click="copyData(pageData.bank_user)">
					复制
				</view>
			</view>
		</view>
		<view class="erweima-wrap">
			<view class="inner">
				<image v-if="pageData.wx_qrcode" :src="pageData.wx_qrcode" mode=""></image>
			</view>
			<view class="desc">
				微信收款码
			</view>
			<view class="saveimg" @click="saveImg(pageData.wx_qrcode)">
				保存图片
			</view>
		</view>
		<view class="erweima-wrap">
			<view class="inner">
				<image v-if="pageData.alipay_qrcode" :src="pageData.alipay_qrcode" mode=""></image>
			</view>
			<view class="desc">
				支付宝收款码
			</view>
			<view class="saveimg" @click="saveImg(pageData.alipay_qrcode)">
				保存图片
			</view>
		</view>
		<view class="sub-btn">
			<view class="left" @click="upClick">
				上传支付凭证
			</view>
			<view :class="{noactive:!img_url.length}" class="right" @click="subData">
				确认提交
			</view>
		</view>
	</view>
</template>

<script>
	// import {createPromiseWithAbort,abortPromise} from '../../common/util.js'
	export default {
		data() {
			return {
				
				id:'',
				img_url:'',
				payDiscountPromise: null,
				pageData:{}
			}
		},
		onShow() {
			//this.getData()
		},
		onLoad(options) {
			
			this.id=options.id
			this.getData()
			
		},
		methods: {
			subData(){
				if(!this.img_url){
					return
				}
				let that=this
				uni.showModal({
				    title: '确定提交?请勿重复提交相同订单',
				    content: '',
				    success: function (res) {
				        if (res.confirm) {
				           
				            that.apipost('/api/home/submit',{img_url:that.img_url,equity_id:that.id},true).then(res => {
				            	if(res.Code==10200){
				            		
				            		uni.showToast({
				            			title: res.Message,
				            			icon: "none",
										duration:4000,
				            		});
									
				            	}
				            	
				            }).catch(err=>{
				            	console.log(err)
				            });
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			upClick(){
				let that=this
				uni.showModal({
				    title: '提示',
				    content: '截图中务必带有订单编号，否则会被拒绝',
				    success: function (res) {
				        if (res.confirm) {
				            that.chooseImg()
				        } else if (res.cancel) {
				            
				        }
				    }
				});
			},
			chooseImg(){
				this.chose=true
				let that=this
				
				uni.chooseImage({
					count:1,
					sizeType:'compressed',
					success: (res) => {
						const imgsFile=res.tempFilePaths
						uni.showLoading({
						    title: '正在上传凭证'
						});
						const uper=uni.uploadFile({
							url: that.upUrl+'/api/home/upimg',
							filePath:imgsFile[0],
							name:'img',
							header:{  
								"Authorization": uni.getStorageSync("auth_token")
							},
							success:function(res){
								
								
								let data=JSON.parse(res.data)
								if(data.Code=='10200'){
									
									uni.showToast({
										title: "上传成功",
										icon: "none",
										duration:4000,
									});
									uni.hideLoading();
									that.img_url=data.Data
									
									
									
								}
							}
						})
						//上传进度更新的方法
						// uper.onProgressUpdate((e)=>{
						// 	if(e.progress==100){
								
								
						// 	}else{
								
						// 	}
							
						// })
					}
				})
			
			},
			saveImg(url){
				uni.downloadFile({
					url: url,
					success: (res) =>{
						if (res.statusCode === 200){
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none",
										duration:4000,
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请设置访问权限",
										icon: "none",
										duration:4000,
									});
								}
							});
						}
					}
				})
			},
			copyData(val){
				uni.setClipboardData({
				    data: val,
				    success: function () {
				        uni.showToast({
				            title: '复制成功',
				            duration:4000,
				        	icon:'none'
				        });
				    }
				});
			},
			getData(){
				let that=this
				that.apipost('/api/home/payment',{id:that.id},true).then(res => {
					if(res.Code==10200){
						
						let data=res.Data
						that.pageData=data
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			enterpage(path){
				if(path){
					uni.navigateTo({
					    url: path
					});
				}else{
					uni.showToast({
					    title: '暂未开放',
					   duration:4000,
						icon:'none'
					});
				}
			}
		}
	}
</script>

<style>
	.bold-t{
		font-size:38rpx;
		padding-bottom:9rpx;
	}
	.sub-btn .right{
		width:286rpx;
		height:70rpx;
		border-radius:50rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		background:#ff7903;
	}
	.sub-btn .left{
		width:286rpx;
		height:70rpx;
		border-radius:50rpx;
		display:flex;
		align-items: center;
		justify-content: center;
		background:#4167ec;
	}
	.sub-btn{
		color:#fff;
		display:flex;
		align-items: center;
		justify-content: space-between;
		padding:10rpx 60rpx;
	}
	.noactive{
		background:#e7e7e7!important;
		color:gray;
	}
	.saveimg{
		text-align: center;
		color:blue;
		width:150rpx;
		margin:0 auto;
		padding-bottom:10rpx;
		margin-bottom:20rpx;
	}
	.erweima-wrap .desc{
		text-align:center;
		padding:8rpx;
	}
	.erweima-wrap .inner{
		width:268rpx;
		height:268rpx;
		margin:0 auto;
	}
	.erweima-wrap{
		background:#fff;
		padding-top:34rpx;
	}
	.card-wrap .copy-btn{
		color:#01cb2a;
		text-decoration: underline;
		display: flex;
		justify-content: space-between;
		margin-bottom:20rpx;
	}
	.card-wrap .list-wrap{
		display: flex;
		justify-content: space-between;
		margin-bottom:20rpx;
	}
	.card-wrap{
		padding:36rpx 18rpx 28rpx 18rpx;
		background:#fff;
		margin-bottom:20rpx;
	}
	.info .content{
		padding-top:50rpx;
		color:#9e9e9e;
	}
	.info .content text{
		padding-left:26rpx;
		color:#fd7a04;
	}
	.info{
		padding:24rpx 0 20rpx 34rpx;
		background:#fff;
		margin-bottom:20rpx;
	}
	.wrap{
		padding:0 20rpx;
		background:#f5f5f5;
		min-height:100%;
	}
</style>
